<template>
	<view>
		<button @click="showSelect">选择</button>

		<u-form  :rules="rules" ref="uForm" :errorType="errorType">
			<!-- 自定义字段 -->
			<block v-for="(item, index) in fields" :key="index">

				<u-form-item :label-position="labelPosition" label-width="130" :prop="item.name"
					:required="item.required" :label="item.title" v-if="item.type == 'map' && showField(item, index)">

					<u-input :border="border" type="select" :select-open="showPicker && mode == 'map'"
						v-model="form[item.name]" :placeholder="item.tip || '请选择' + item.title"
						@click="showPicker=true"></u-input>

				</u-form-item>


			</block>
		</u-form>

		<u-select v-model="showPicker" mode="mutil-column-auto" :default-value="chosenval" :list="maplist" @confirm="confirm"></u-select>

	</view>
</template>

<script>
	import {
		formRule
	} from '@/common/fa.mixin.js';
	export default {
		data() {

			return {
				show: false,
				collist: [],
				maplist:[],//关联数组
				chosenval:[1,0, 0],
				errorType: ['message'],
				rules: {},
				diyform: {},
				form: {},
				// 表单字段
				fields: [],
				//必须的字段
				required: [],
				border: false,
				labelPosition: 'left',
				showPicker: false,
				mode: '',
				params: {},
				selectedValue:{},
				mapfieldhide:'',//前台显示的相关信息
				mapfield:'',//关联数组的字段
				//对于关联数组的处理,需要一个附件字段表示默认值,及关联数组的值的存储
				
			}

		},
		mixins: [formRule],
		onLoad(e) {
			this.fetchdata();
			this.init();

		},
		methods: {
		 
			 
			 
			 
			showField(item, index) {
				console.log(item,item.type,item.mapdata);				
				let visible = true;
				if(item.type=="map")
				{
					this.maplist=item.mapdata;
					this.mapfield=item.name;
					this.mapfieldhide=item.name+"_";
				}
				

				for (var i = 0; i < this.rules[item.name].length; i++) {
					this.rules[item.name][i].required = (visible ? (this.rules_bak[item.name][i].required || false) :
						false);
					this.fields[index].required = (visible ? (this.rules_bak[item.name][i].required || false) : false);
				}
				return visible;
			},


			init() {
				this.$api.testField().then(res => {
					console.log(res.data);
					if (res.code) {
						this.diyform = res.data.diyform;
						this.fields = res.data.fields;

						//渲染自定义字段
						let custom_form = {};
						let rules = {};
						this.fields.map(item => {
							//表单赋值
							if (item.type == 'number') {
								custom_form[item.name] = item.value || item.defaultvalue || 0;
							} else {
								custom_form[item.name] = item.value || item.defaultvalue || '';
							}

							//单图赋值
							if (item.type == 'image') {
								if (item.value) {
									item.value = [{
										url: this.cdnurl(item.value)
									}];
								} else {
									item.value = [];
								}
							}
							//多图赋值
							if (item.type == 'images') {
								if (item.value) {
									let images = item.value.split(',');
									let urls = [];
									images.forEach(it => {
										urls.push({
											url: this.cdnurl(it)
										});
									});
									item.value = urls;
								} else {
									item.value = [];
								}
							}
							//单文件
							if (item.type == 'file') {
								item.value = item.value ? [item.value] : [];
							}
							//多文件
							if (item.type == 'files') {
								if (item.value) {
									item.value = item.value.split(',');
								} else {
									item.value = [];
								}
							}
							//默认值
							item.required = false;

							//追加自定义表单验证
							rules[item.name] = this.getRules(item);

							//判断验证规则是否必选
							rules[item.name].map(rule => {
								if (rule.required) {
									item.required = true;
								}
							});
						});

						//如果需要验证码
						if (this.diyform.iscaptcha) {
							custom_form.captcha = '';
							rules.captcha = [{
								required: true,
								message: '请输入验证码',
								trigger: ['change', 'blur']
							}];
						}
						this.form = custom_form;
						this.rules = rules;
						this.rules_bak = this.$u.deepClone(rules);

						this.showForm = true;
						//设置表单验证规则
						console.log(this.form, this.rules, this.fields);
						this.$nextTick(() => {
							this.$refs.uForm.setRules(this.rules);
						});
					} else {
						this.$u.toast(res.msg);
						//禁止重新加载
						//setTimeout(() => {uni.navigateBack({delta: 1})}, 1500)
					}
				});
			},

			async fetchdata() {
				//	this.collist = [{value: 1,label: '中国'},{value: 8,label: '美国',}];
				this.$api.brandseries().then(data => {
					console.log(data);
					this.maplist = data.data;
					// if (data.code === 1) {

					// } else {
					// 	this.$u.toast('获取品牌数据失败');
					// }

				})
			},
			showSelect() {
				this.showPicker = true;
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(param) {
				let e=param.selectValue;
				 this.selectedValue=param.seletindex;
				 console.log("多参数返回",e,this.selectedValue);
			 
				 
				console.log(this.mapfield,this.mapfieldhide);
				
				
				// 获取用户选择的值
				/*
				  const selectedLabels = e.map((item) => item.label);
				  this.selectedValue = selectedLabels.join(" - ");
			
				  // 将选择的值转换为 default-value 格式
				  this.defaultValue = e.map((item) => item.value);
			
				  // 打印结果
				  console.log("用户选择的值：", e);
				  console.log("default-value：", this.defaultValue);
				
				
				*/
				
				 if(Array.isArray(e)) {
				     let sname= e[e.length - 1];					 
					 // console.log(e,sname,e.length);
					this.$set(this.form, this.mapfield, sname.label);
					//保存选中项目的label,value,保存默认值
					 let hideinfo={value:this.selectedValue,item:sname}
					 console.log(hideinfo);
					this.$set(this.form, this.mapfieldhide, hideinfo);  //将返回数组中的索引做为默认值
					console.log(this.form);
				}else
				{
					console.log("207");
					this.$set(this.form, this.mapfield, JSON.stringify(e));
				}
				
				
			}

		}
	}
</script>

<style>

</style>